<template>
	<el-dialog
    title="新增彩票"
    :visible.sync="showAddNew"
    width="48%"
    :before-close="handleClose">
	    <el-form :model="gamesInfo" :rules="rules" ref="gamesInfo">
	        <table>
	            <tr>
	                <td class="title">彩票英文名</td>
	                <td class="content">
	                    <el-form-item prop="en">
	                        <el-input v-model="gamesInfo.en"></el-input>
	                    </el-form-item>
	                </td>
	            </tr>
	            <tr>
	                <td class="title">彩票中文名</td>
	                <td class="content">
	                    <el-form-item prop="cn">
	                        <el-input v-model="gamesInfo.cn"></el-input>
	                    </el-form-item>
	                </td>
	            </tr>
	            <tr>
	                <td class="title">icons</td>
	                <td class="content">
	                    <ul style="display:flex;flex-direciton:row; align-items: center;" >
		                    <li>
		                    	<el-form-item prop="smIcon">
		                            <label for="smIcon"  style="width:40px;height:40px;font-size:12px" ref="smIcon"> <i class="el-icon-plus"></i></label>
		                            <input type="file" id="smIcon" title="asdfa" @change="selectFile(40,40,$event)" name="icon">
		                        </el-form-item>
		                    </li>
		                    <li style="margin-top: -13px;">
		                    	<span style="font-size:14px">请上传40x40大小的图片</span>
		                    </li>
                    	</ul>
	                </td>
	            </tr>
	            <tr>
	                <td class="title">icons</td>
	                <td class="content">
	                    <ul style="display:flex;flex-direciton:row;
						      align-items: center;">
		                    <li>
		                    	<el-form-item prop="bigIcon">
		                            <label for="bigIcon"  style="width:90px;height:90px;font-size:28px" ref="bigIcon"> <i class="el-icon-plus"></i></label>
		                            <input type="file" id="bigIcon" title="asdfa" @change="selectFile(90,90,$event)" name="icon">
		                        </el-form-item>
		                    </li>
		                    <li style="margin-top: -17px;">
		                    	<span style="font-size:14px">请上传90x90大小的图片</span>
		                    </li>
                    	</ul>
	                </td>
	            </tr>
	            
	        </table>
	    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addNewGame">确 定</el-button>
    </span>
    </el-dialog>
	
</template>

<script>
import axios from 'axios'
export default{
	props: ['showAddNew'],
    data(){
        return {
        	uploadFiles:[],    //存文件
            gamesInfo: {smIcon:'',bigIcon:''},     //写对象为了验证是否输入
            rules: {
                en: [
                    {required: true,message:'请输入彩票英文名称',trigger:'blur'},
                    {min:2,message:'名称最少两个字符',trigger:'blur'}
                ],
                cn: [
                    {required: true,message:'请输入彩票中文名称',trigger:'blur'},
                    {min:2,message:'名称最少两个字符',trigger:'blur'}
                ],
                smIcon: [
                    {required:true,message:'请选择图片',trigger:'change'}
                ],
                bigIcon: [
                    {required:true,message:'请选择图片',trigger:'change'}
                ]
            }
        }
    },
    methods: {
        handleClose(){
        	//关闭表单时置空复原表单
        	console.log(this.$refs)
        	var smIcon = this.$refs.smIcon;
            var bigIcon = this.$refs.bigIcon;
            smIcon.innerHTML = '<i class="el-icon-plus"></i>';   //关闭时回复原样
            bigIcon.innerHTML ='<i class="el-icon-plus"></i>';
//          this.$refs['gamesInfo'].resetFields();  //表格置空
            this.$refs.gamesInfo.resetFields();  //表格置空
            this.uploadFiles = [];
        	
            this.$parent.showAddNew = false;
        },
        addNewGame(){
//      	console.log(this.$refs['gamesInfo'])
            this.$refs['gamesInfo'].validate((valid) => {
            if (valid) {
                var fd = new FormData();
                for(var i=0;i<this.uploadFiles.length;i++){
                    fd.append("file",this.uploadFiles[i]);
                }
                // fd.append("file",this.uploadFiles[0]);
                fd.append('en',this.gamesInfo.en);
                fd.append('cn',this.gamesInfo.cn);
                let config = {  
                    headers:{'Content-Type':'multipart/form-data'}  
                };
            	console.log(config)
            //addNewGame:api接口
                axios.post(this.$apis.addNewGame,fd,config)
                .then((resp)=>{
                    console.log(resp);
                    console.log(resp.data.message);
                    this.$message({
                        message: resp.data.message,
                        type: resp.data.success?'success':'danger'
                    });
                    if(resp.data.success){
                        this.$store.dispatch('loadAllGame',{api:this.$apis.findAllGames})
                    }
                    //请求添加成功之后,重新发起请求,获取彩种的列表
                    this.handleClose();
                }).catch((error)=>{
                    console.log(error);
                })
            } else {
                console.log('error submit!!');
                return false;
            	}
            });
        },
        //打开图片选择和裁剪界面
        selectFile(width,height,event){
            console.log("宽是"+width);
            console.log(event);
            var e = event || window.event;
            let file = e.target.files[0];
            var url = this.getObjectURL(file);
            var image = new Image();
            image.src = url;
            image.onload = ()=>{
                if(image.width!=width||image.height!=height){
                    alert(`请上传尺寸为宽${width},高${height}的图片`);
                }else{
                    if(width==40){
                        this.uploadFiles.push(file);
                        var smIcon = this.$refs.smIcon;
                        smIcon.innerHTML=image.outerHTML;
                        this.gamesInfo.smIcon = true;
                    }
                    if(width==90){
                        console.log("宽度是"+width);
                        this.uploadFiles.push(file);
                        var bigIcon = this.$refs.bigIcon;
                        console.log(this.$refs);
                        bigIcon.innerHTML=image.outerHTML;
                        this.gamesInfo.bigIcon = true;
                    }
                }
            }
            //文件预览
            console.log(file);
        },
        //取得该文件的url 
        getObjectURL(file) { 
	        　　var url = null ; 
		        　　if (window.createObjectURL!=undefined) { 
		        　　　　url = window.createObjectURL(file) ;   //转换
		        　　} else if (window.URL!=undefined) { 
		        　　　　url = window.URL.createObjectURL(file) ; 
		        　　} else if (window.webkitURL!=undefined) { 
		        　　　　url = window.webkitURL.createObjectURL(file) ; 
		        　　} 
	        　　return url ; 
        }
    }
}

</script>

<style lang="scss" scoped>
label {
      margin: 10px 10px 0 5px;
      font-size: 30px;
      border-radius: 5px;
      color: #333;
      border: 1px dashed #ccc;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    #smIcon,#bigIcon {
      display: none;
      margin-top: 100px;
    }
</style>